import React from 'react'
import { Row, Col, Input, Button } from 'antd'
import FormItem from '../../../../components/FormItem';

export default function Item(props) {
  const { value, index, length } = props

  const onChange = (type, value) => {
    props.onChange(index, type, value)
  }

  const formItems = [
    {
      name: 'name' + value.enumer_id,
      options: {
        initialValue: value.name,
        rules: [
          { required: true, message: '请输入枚举值' },
          { max: 128, message: '最长128个字符' },
          { pattern: /^[\u4E00-\u9FA5_a-zA-Z0-9]+$/, message: '限中英文数字下划线' },
        ],
      },
      component: (
        <Input placeholder='请输入枚举值' onChange={e => onChange('name', e.target.value)} />
      ),
    },
    {
      name: 'code' + value.enumer_id,
      options: {
        initialValue: value.code,
        rules: [
          { required: true, message: '请输入枚举值code' },
          { max: 128, message: '最长128个字符' },
          { pattern: /^[\S]/, message: '不允许空字符开头' },
        ],
      },
      component: (
        <Input placeholder='请输入枚举值code' onChange={e => onChange('code', e.target.value)} />
      ),
    }
  ]

  const del = () => {
    props.del(index)
  }

  const move = (step) => {
    props.move(index, step)
  } 

  return (
    <Row gutter={10}>
      <Col span={2}>{index + 1}</Col>
      {formItems.map((item) => {
        return (
          <Col span={8} key={item.name}>
            <FormItem form={props.form} item={item} />
          </Col>
        );
      })}
      <Col span={6}>
        <Button type="link" onClick={del.bind(this)}>删除</Button>
        <Button type="link" disabled={index === 0} onClick={move.bind(this, 'up')}>上移</Button>
        <Button type="link" disabled={index === length - 1} onClick={move.bind(this, 'down')}>下移</Button>
      </Col>
    </Row>
  )
} 